<template>

	<view class="page">

		<view class="page-header">
			<cc-beautyTabs :tabList="Tabs.list" @tabChange="PageTabsAndSwiperChange('tabs',$event)"
				:active="Tabs.current"></cc-beautyTabs>
		</view>

		<swiper class="page-swiper" :current="Tabs.current" circular :indicator-dots="false"
			@change="PageTabsAndSwiperChange('swiper',$event)" :duration="Data.SwiperDuration">
			<swiper-item class="swiper-item" @scroll="SwiperItemScroll">
				<view class="trends-city-list">

					<view class="trends-city-list-li">
						惠城区
					</view>
					<view class="trends-city-list-li">
						惠阳区
					</view>
					<view class="trends-city-list-li">
						镇隆区
					</view>
					<view class="trends-city-list-li">
						北京
					</view>

				</view>

				<view class="trends-list">
					<template v-for="(nItem,index) in Trends.list">
						<dynamicLi :data="nItem" :userInfo="userInfo" @clickUserAvatar="clickUserAvatar"
							@clickReport="clickReport" @clickGreet="clickGreet" @clickLookComment="clickLookComment"
							@clickDynamic="clickDynamic"></dynamicLi>
					</template>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="nearby-list">
					<template v-for="item in Nearby.list">
						<NearbyUserLi :data="item"></NearbyUserLi>
					</template>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="drift-options">
					<wd-button type="success" @click="GetDrift">获取漂流瓶</wd-button>
					<wd-button type="warning" @click="WriteDrift">写漂流瓶</wd-button>
				</view>
			</swiper-item>
		</swiper>

		<wd-message-box selector="wd-message-box-slot">
			<view class="user-info-dialog">
				<view class="user-info-dialog-avatar">
					<userAvatar radius="50%" :src="Data.clickUser.avatar" :size="110" @click="clickUserAvatar(nItem)">
					</userAvatar>
				</view>
				<view class="user-info-dialog-username">
					<userName align="center" :username="Data.clickUser.nickname" :gender="Data.clickUser.gender">
					</userName>
				</view>
				<view class="user-info-block">
					<view class="user-info-block-tab">
						<text>26岁</text>
					</view>
					<view class="user-info-block-tab">
						<text class="user-info-address-sheng">广东</text>
						<text class="user-info-address-sheng"> · </text>
						<text class="user-info-address-sheng">惠州</text>
					</view>
					<view class="user-info-block-tab">
						<text class="user-info-address-sheng">IP</text>
						<text class="user-info-address-sheng"> : </text>
						<text class="user-info-address-sheng">惠州</text>
					</view>
				</view>
			</view>

		</wd-message-box>
	</view>


</template>

<script setup>
	import NearbyUserLi from '@/components/nearby_user_li/nearby_user_li.vue'
	import userLi from '@/components/user_li/user_li.vue'
	import dynamicLi from '@/components/dynamic_li/dynamic_li.vue'
	import userName from '@/components/user_name_text/user_name_text.vue';
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	import {
		useMessage
	} from 'wot-design-uni'
	const message = useMessage('wd-message-box-slot')
	import {
		computed,
		ref,
		reactive,
		watch
	} from 'vue'

	import {
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import TrendsList from '../../../components/trends_list/trends-list.vue'
	import useTrendsStore from '@/stores/store/trends.js'
	const TrendsStore = useTrendsStore()

	import useLocationStore from '@/stores/store/location.js'
	const LocationStore = useLocationStore()

	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	const userInfo = userStore.userInfo

	const LocationData = computed(() => LocationStore.data)

	const Tabs = computed(() => TrendsStore.Tabs)

	const Trends = computed(() => TrendsStore.Trends)

	const Nearby = computed(() => TrendsStore.Nearby)

	const Drift = computed(() => TrendsStore.Drift)

	watch(() => TrendsStore.Tabs.current, (current) => {
		if (current == 0) {
			let initData = TrendsStore.Trends.initData
			if (!initData) {
				TrendsStore.GetServerTrendsList()
			}
		} else if (current == 1) {
			let initData = TrendsStore.Nearby.initData
			if (!initData) {
				TrendsStore.GetServerNearbyList()
			}
		}
	}, {
		deep: true,
		immediate: true
	})
	const Data = reactive({
		clickUser: {}
	})
	onReady(() => {
		LocationStore.GetLocation()
			.then(() => {
				return LocationStore.PushMyLocation()
			}).then((res) => {
				console.log(res);
			})
	})
	onReachBottom(() => {
		TrendsStore.incrPage()
	})

	function PageTabsAndSwiperChange(mode, e) {
		let detail = e.detail
		let index = null
		if (mode == "swiper") {
			index = detail.current
		} else if (mode == "tabs") {
			index = detail.index
		}
		TrendsStore.PageChangeUpdate(index)
	}
	// 跳转到聊天
	function ConversationTo() {
		uni.navigateTo({
			url: "/pages/Tarbar/Conversation/value"
		})
	}
	// 点击用户头像
	function clickUserAvatar(item) {
		let userInfo = item.userInfo
		Data.clickUser = userInfo
		message
			.confirm({}).then(res => {
				ConversationTo()
			})
	}
	// 点击举报
	function clickReport(item, index) {
		TrendsStore.Report().then(r => {
			console.log(r);
		}).catch(err => {
			console.log(err);
		})
	}
	// 点击打招呼
	function clickGreet(item, index) {
		ConversationTo()
	}
	// 点击查看更多评论
	function clickLookComment(item, index) {
		uni.navigateTo({
			url: "/pages/Tarbar/Trends/info",
			success: (res) => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('GetDynamicInfo', {
					mode: "LookComment",
					data: item
				})
			}
		})
	}

	function clickDynamic(item, index) {
		uni.navigateTo({
			url: "/pages/Tarbar/Trends/info",
			success: (res) => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('GetDynamicInfo', item)
			}
		})
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		height: 100%;
		/* background: linear-gradient(180deg, rgba(82, 140, 232, 0.32816876750700286) 21%, rgba(254, 254, 254, 1) 55%); */
	}

	.page-header {
		padding-top: 0rpx;
		padding-bottom: 0rpx;
		position: sticky;
		top: 0rpx;
		left: 0rpx;
		background: white;
		z-index: 1000;
	}

	.trends-city-list {
		padding: 25rpx 30rpx;
		padding-top: 25rpx;
		display: flex;
		gap: 20rpx;
	}

	.trends-city-list-li {
		font-size: 25rpx;
		padding: 10rpx 20rpx;
		background: #eaeaea;
		border-radius: 5rpx;
	}

	.user-info-dialog {
		width: 100%;
	}

	.user-info-dialog-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 25rpx;
	}

	.user-info-dialog-id {
		font-size: 20rpx;
		margin-bottom: 25rpx;
	}

	.user-info-dialog-username {
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}

	.user-info-block {
		margin: 0px;
		height: 30rpx;
		margin: 8rpx 0rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		justify-content: center;
	}

	.user-info-block-tab {
		padding: 3rpx 8rpx;
		font-size: 20rpx;
		border-radius: 6rpx;
		background-color: #d5dde161;
		color: #6f6b6b;
	}

	.user-info-username {
		font-size: 35rpx;
	}

	.user-gender-icon {
		margin-right: 6rpx;
	}

	.user-gender-female-color {
		color: #e10000;
		font-weight: bold;
	}

	.user-gender-male-color {
		color: #229ee9;
		font-weight: bold;
	}

	.trends-list {
		padding: 0rpx 0rpx;
		background: #c3c3c324;
		overflow-y: overlay;
		flex: 1;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
	}

	.drift-options {
		width: 100%;
		position: fixed;
		bottom: 15%;
		display: flex;
		justify-content: space-between;
	}

	.nearby-list {}

	.nearby-list-li {}
</style>